<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>物资管理</el-breadcrumb-item>
      <el-breadcrumb-item>物资采购</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
      <el-row :gutter="6">
        <el-col :span="6">
          <el-input
            clearable
            placeholder="请输入物资名称查询"
            v-model="queryInfo.purname"
            class="input-with-select"
          ></el-input>
        </el-col>
        <el-col :span="8">
          <el-button style="margin-left: 50px" type="primary" icon="el-icon-search" @click="getpurchaseList ()">查找</el-button>
          <el-button style="margin-left: 30px" type="success" icon="el-icon-circle-plus-outline" @click="addDialogVisible = true">添加</el-button>
        </el-col>
      </el-row>
      <template>
        <el-table stripe style="width: 100%" :data="purData">
          <el-table-column prop="id" type="index" label="ID"></el-table-column>
          <el-table-column prop="imageUrl" label="图片" align="center" width="150px" padding="0px">
            <template slot-scope="scope">
              <el-popover placement="right"  trigger="hover">
                <img :src="require('@/assets/procurementImg/'+scope.row.imageUrl)"  style="height: 200px;width: 200px"/>
                <img  slot="reference" :src="require('@/assets/procurementImg/'+scope.row.imageUrl)" :alt="'图片加载失败'" style="height: 38px;width: 38px;cursor: pointer">
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column prop="purname" label="物资名称"></el-table-column>
          <el-table-column label="物资规格" width="100">
            <template slot-scope="scope">
              <el-tag type="success" size="mini" closable v-text="scope.row.model"></el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="price" label="价钱" width="80"></el-table-column>
          <el-table-column prop="remark" label="备注"></el-table-column>
          <el-table-column prop="address" label="采购地址"></el-table-column>
          <el-table-column prop="purtime" label="采购时间"></el-table-column>
          <el-table-column prop="purnum" label="数量" width="80"></el-table-column>
          <el-table-column prop="state" label="状态" width="100">
            <template slot-scope="scope">
              <el-tag size="mini"   effect="plain" v-if="scope.row.state==1">已采购</el-tag>
              <el-tag size="mini"  type="danger" effect="plain" v-if="scope.row.state==0">采购中</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="text" size="mini"   icon="el-icon-edit" @click="openedit(scope.row)">编辑</el-button>
              <el-button style="margin-left:10px;" type="text" size="mini"  icon="el-icon-delete" @click="del(scope.row.id,scope.row.imageUrl)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page="queryInfo.page"
                     :page-sizes="[5, 10, 15, 30]"
                     :page-size="queryInfo.size"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total">
      </el-pagination>
    </el-card>
    <!-- 添加物资采购信息 -->
    <el-dialog title="新增采购" :visible.sync="addDialogVisible" width="50%" @close="closeAdd">
      <el-form  :model="addForm" :rules="rulesAdd" ref="rulesFormAdd" label-width="100px">
        <el-form-item label="物资名称" prop="purname">
          <el-input v-model="addForm.purname"></el-input>
        </el-form-item>
        <el-form-item label="物资图片" prop="imageUrl">
          <!-- 图片上传部分 -->
          <el-upload
            v-model="addForm.imageUrl"
            action="require('@/assets/procurementImg/')"
            :class="{ disabled: uploadDisabled }"
            list-type="picture-card"
            :limit="limitcount"
            :on-change="handleChange"
            :before-remove="handleRemove"
            accept="image/*"
            :on-success="handleSuccess"
            ref="upload"
            :on-preview="handlePictureCardPreview"
            :http-request="fileupload"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <div class="grid-content bg-purple-light">
              <el-form-item label="物资规格" prop="model">
                <el-input v-model="addForm.model"></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple">
              <el-form-item label="单价" prop="price">
                <el-input v-model='addForm.price' oninput="value=value.replace(/[^\d]/g,'')" maxLength='9'/>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div class="grid-content bg-purple-light">
              <el-form-item label="采购地址" prop="address">
                <el-input v-model="addForm.address"></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple">
              <el-form-item label="采购数量" prop="purnum">
                <el-input v-model='addForm.purnum' oninput="value=value.replace(/[^\d]/g,'')" maxLength='9'/>
              </el-form-item>

            </div>
          </el-col>
        </el-row>
        <el-form-item label="备注信息" prop="remark">
          <el-input type="textarea" v-model="addForm.remark"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button @click="cancal">取 消</el-button>
          <el-button type="primary" @click="addpurchase">确 定</el-button>
        </span>
    </el-dialog>
    <!-- 编辑物资采购信息 -->
    <el-dialog title="编辑采购" :visible.sync="editDialogVisible" width="50%" @close="closeedit">
      <el-form  :model="editForm" :rules="rulesAdd" ref="rulesFormedit" label-width="100px">
        <el-form-item label="物资名称" prop="purname">
          <el-input v-model="editForm.purname"></el-input>
        </el-form-item>
<!--        <el-form-item label="物资图片" prop="imageUrl">-->
<!--          &lt;!&ndash; 图片上传部分 &ndash;&gt;-->
<!--          <el-upload-->
<!--            v-model="editForm.imageUrl"-->
<!--            action="require('@/assets/procurementImg/')"-->
<!--            :class="{ disabled: uploadDisabled }"-->
<!--            list-type="picture-card"-->
<!--            :limit="limitcount"-->
<!--            :on-change="handleChange"-->
<!--            :before-remove="handleRemove"-->
<!--            accept="image/*"-->
<!--            :on-success="handleSuccess"-->
<!--            ref="upload"-->
<!--            :on-preview="handlePictureCardPreview"-->
<!--            :http-request="fileupload"-->
<!--            :file-list="certificate"-->
<!--            :show-file-list=true-->
<!--          >-->
<!--            <i class="el-icon-plus"></i>-->
<!--          </el-upload>-->
<!--        </el-form-item>-->
        <el-form-item label="状态" prop="state">
          <template>
            <el-radio-group v-model="editForm.state">
              <el-radio  :label=0>采购中</el-radio>
              <el-radio  :label=1>已采购</el-radio>
            </el-radio-group>
          </template>
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <div class="grid-content bg-purple-light">
              <el-form-item label="物资规格" prop="model">
                <el-input v-model="editForm.model"></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple">
              <el-form-item label="单价" prop="price">
                <el-input v-model='editForm.price' oninput="value=value.replace(/[^\d]/g,'')" maxLength='9'/>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div class="grid-content bg-purple-light">
              <el-form-item label="采购地址" prop="address">
                <el-input v-model="editForm.address"></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple">
              <el-form-item label="采购数量" prop="purnum">
                <el-input v-model='editForm.purnum' oninput="value=value.replace(/[^\d]/g,'')" maxLength='9'/>
              </el-form-item>

            </div>
          </el-col>
        </el-row>
        <el-form-item label="备注信息" prop="remark">
          <el-input type="textarea" v-model="editForm.remark"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button @click="editcancal">取 消</el-button>
          <el-button type="primary" @click="editpurchase">确 定</el-button>
        </span>
    </el-dialog>
<!--    &lt;!&ndash; 图片预览 &ndash;&gt;-->
<!--    <el-dialog :visible.sync="dialogVisible">-->
<!--      <img width="100%" :src="dialogImageUrl" alt />-->
<!--    </el-dialog>-->
  </div>
</template>

<script>
export default {
  name: 'purchase',
  methods: {
    del (purid, imageUrl) {
      this.$confirm('此操作将永久删除该信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const { data: res } = await this.$http.delete('sys/purchase/' + purid)
        if (res.code !== 200) {
          return this.$message.error(res.msg)
        }
        // eslint-disable-next-line no-unused-vars
        const { data: ress } = await this.$http.delete('sys/upload/deleteFile/' + imageUrl)
        await this.getpurchaseList()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    editcancal () {
      this.editDialogVisible = false
    },
    editpurchase () {
      this.$refs.rulesFormedit.validate(async (valid) => {
        if (valid) {
          const { data: res } = await this.$http.put('sys/purchase', this.editForm)
          if (res.code !== 200) {
            return this.$message.error(res.msg)
          }
          this.$message.success(res.msg)
          await this.getpurchaseList()
          this.editDialogVisible = false
        }
      })
    },
    openedit (purchaseInfo) {
      this.editForm = purchaseInfo
      // this.certificate.push({ url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1594901947657&di=397a8b4a7fd07ad814873852e1a40b86&imgtype=0&src=http%3A%2F%2Fa2.att.hudong.com%2F36%2F48%2F19300001357258133412489354717.jpg' })
      // this.certificate.push({ url: '../../assets/procurementImg/' + this.editForm.imageUrl })
      this.editDialogVisible = true
    },
    cancal () {
      this.addDialogVisible = false
      this.imagedelete()
    },
    // 文件上传
    async fileupload (param) {
      // eslint-disable-next-line no-unused-vars
      const file = param.file
      // eslint-disable-next-line no-unused-vars
      const form = new FormData()
      form.append('file', file)
      // eslint-disable-next-line no-unused-vars
      const { data: res } = await this.$http.post('sys/upload', form)
      this.fileNewName = res.data
      const prom = new Promise((resolve, reject) => {})
      prom.abort = () => {}
      return prom
    },
    // 图片被更改
    handleChange (file, fileList) {
      this.uploadDisabled = fileList.length >= this.limitcount
    },
    // 删除图片
    handleRemove (file, fileList) {
      this.uploadDisabled = fileList.length >= this.limitcount
      this.imagedelete()
      this.$refs.upload.clearFiles()
    },
    async imagedelete () {
      // eslint-disable-next-line no-unused-vars
      const { data: res } = await this.$http.delete('sys/upload/deleteFile/' + this.fileNewName)
      this.addForm.imageUrl = ''
      this.fileNewName = ''
    },
    handleSuccess (response, file, fileList) {
    },
    // 增加采购信息里的图片预览
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    // 向数据库增加采购信息
    addpurchase () {
      // eslint-disable-next-line eqeqeq
      if (this.fileNewName == '') {
        return
      }
      this.$refs.rulesFormAdd.validate(async (valid) => {
        this.addForm.imageUrl = this.fileNewName
        if (valid) {
          const { data: res } = await this.$http.post('sys/purchase', this.addForm)
          if (res.code !== 200) {
            return this.$message.error(res.msg)
          }
          this.$message.success(res.msg)
          await this.getpurchaseList()
          this.addDialogVisible = false
        }
      })
    },
    // 关闭增加采购信息页面
    closeAdd () {
      this.$refs.rulesFormAdd.resetFields()
    },
    closeedit () {
      this.certificate = []
      this.$refs.rulesFormedit.resetFields()
    },
    // 获取当前页大小
    handleSizeChange (val) {
      this.queryInfo.size = val
      this.getpurchaseList()
    },
    // 获取当前页数
    handleCurrentChange (val) {
      this.queryInfo.page = val
      this.getpurchaseList()
    },
    // 获取所有采购信息
    async getpurchaseList () {
      // eslint-disable-next-line no-unused-vars
      const { data: res } = await this.$http.get('sys/purchase', { params: this.queryInfo })
      if (res.code !== 200) {
        return this.$message.error(res.msg)
      }
      this.purData = res.data.data
      this.total = res.data.total
    }
  },
  mounted () {
    this.getpurchaseList()
  },
  data () {
    return {
      certificate: [],
      dialogVisible: false,
      fileNewName: '',
      limitcount: 1,
      uploadDisabled: false,
      rulesAdd: {
        purname: [
          { required: true, message: '请输入物资名称', trigger: 'blur' },
          { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
        ],
        model: [
          { required: true, message: '请输入物资规格', trigger: 'blur' },
          { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
        ],
        price: [
          { required: true, message: '请输入单价', trigger: 'blur' }
        ],
        purnum: [
          { required: true, message: '请输入采购的数量', trigger: 'blur' }
        ],
        address: [
          { required: true, message: '请输入采购地址', trigger: 'blur' }
        ]
      },
      editForm: {},
      addForm: {
        purname: '',
        imageUrl: '',
        model: '',
        price: null,
        remark: '',
        address: '',
        purtime: '',
        purnum: null,
        purtype: null
      },
      addDialogVisible: false,
      editDialogVisible: false,
      purData: [],
      queryInfo: {
        purname: '',
        page: 1,
        size: 5
      },
      total: 0
    }
  }
}
</script>

<style scoped>

</style>
